<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        td {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
       <!--  <button @click="sendGetQuest">发送get请求</button> -->
        <div class="addGood">
            名称：<input type="text" v-model="gname">
            数量:<input type="number" v-model="gnum">
            是否上架:<select v-model="gstatus">
                <option value="true">上架</option>
                <option value="false">下架</option>
            </select>
            <button @click="addGood">新增商品</button>
        </div>
        <table border="1px" width="800px">
            <thead>
                <th><input type="checkbox" @change="checkAllMethod" v-model="checkAll"></th>
                <th>编号</th>
                <th>名称</th>
                <th>状态</th>
                <th>数量</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr v-for="good in goods">
                    <td><input type="checkbox" v-model="good.ischecked"></td>
                    <td>{{good.id}}</td>
                    <td>{{good.name}}</td>
                    <td><span v-if="good.status">上架状态</span>
                        <span v-else="good.status">下架状态</span>
                    </td>
                    <td>
                        <button @click="addNum(good.id)">+</button>
                        {{good.num}}
                        <button @click="subNum(good.id)">-</button>
                    </td>
                    <td>
                        <button @click="del(good.id)">删除</button>
                        <button @click="goodDown(good.id)" v-if="good.status">点击下架</button>
                        <button @click="goodUp(good.id)" v-else="good.status">点击上架</button>
                    </td>
                </tr>
            </tbody>
        </table>
        选中商品的总数量：{{total}}
    </div>
</body>
<script>
    // 实例化vue对象
    var vue = new Vue({
        el: "#app",
        data: {
            goods: [
                /*  { id: 1, name: "苹果", status: true, num: 5, ischecked: true },
                 { id: 2, name: "香蕉", status: true, num: 5, ischecked: false },
                 { id: 3, name: "橘子", status: false, num: 5, ischecked: false },
                 { id: 4, name: "甘蔗", status: true, num: 5, ischecked: false },
                 { id: 5, name: "荔枝", status: true, num: 5, ischecked: false } */
            ],
            gid: 5,
            gname: "",
            gstatus: true,
            gnum: 5,
            gischecked: false,
            checkAll: false
        },
        methods: {
            /*   addGood:function(){
                  alert(1111111111)
              } */
            addGood() {
                //添加商品，往数组goods加一条json数据
                var myGood = {
                    id: ++this.gid,
                    name: this.gname,
                    num: this.gnum,
                    status: this.gstatus,
                    ischecked: this.gischecked
                }
                this.goods.push(myGood)
            },
            //全选，全不选，
            checkAllMethod() {
                this.goods.forEach(element => {
                    //孩子checkbox的checked属性值跟全选（父checkbox）的属性值保持一致
                    element.ischecked = this.checkAll
                });
            },
            //添加数量
            addNum(id) {
                this.goods.forEach(element => {
                    if (element.id == id) {
                        element.num++
                    }
                });
            },
            //减少数量
            subNum(id) {
                this.goods.forEach(element => {
                    if (element.id == id) {
                        if (element.num > 0) {

                            element.num--
                        }
                    }
                });
            },
            //删除商品
            del(id) {
                var flag = confirm("你确认要删除吗？");
                if (flag) {
                    this.goods.forEach((element, index) => {
                        if (element.id == id) {
                            //数组删除元素，根据下标
                            this.goods.splice(index, 1)
                        }

                    });
                }
            },
            //商品下架
            goodDown(id) {
                this.goods.forEach(element => {
                    if (element.id == id) {
                        element.status = !element.status
                    }
                });
            },
            //商品上架
            goodUp(id) {
                this.goods.forEach(element => {
                    if (element.id == id) {
                        element.status = !element.status
                    }
                });
            },
            sendGetQuest() {
                let _this = this;
                axios.get('/good/findAll')
                    .then(function (response) {
                        // handle success
                        // console.log(response.data);
                        /*       console.log(_this.goods) */
                        _this.goods = response.data
                    })
                    .catch(function (error) {
                        // handle error
                        console.log(error);
                    })
                    .then(function () {
                        // always executed
                    });
            }
        },
        computed: {
            //计算方法，此处的代码会根据data中数据的变化自动发生（重新计算）变化
            total() {
                var sum = 0;
                //将所有选中的商品的数量加起来
                this.goods.forEach(element => {
                    if (element.ischecked) {
                        sum += element.num
                    }
                });
                return sum
            }
        },
        beforeCreate() {
            console.log('组件实例化之前')
        },
        created() {
            console.log('组件实例化完毕，单页面还未显示')
        },
        beforeMount() {
            console.log('组件挂载前，页面仍未展示，但虚拟Dom已经配置')
        },
        mounted() {
            console.log('组件挂在后，此方法执行后，页面显示')
            //请求后端数据
            this.sendGetQuest()
        },
        beforeUpdate() {
            console.log('组件更新前，页面仍未更新，但虚拟Dom已经配置')
        },
        updated() {
            console.log('组件更新，此方法执行后，页面显示')
        },
        beforeDestroy() {
            console.log('组件销毁前')
        },
        destroyed() {
            console.log('组件销毁')
        }

    })
</script>

</html>